<template>
    <!--Start Ground-->
    <div class="ground-container" ref="box">
        <mu-grid-list class="ground" :cellHeight="cellHeight">
            <mu-sub-header>广场</mu-sub-header>
            <mu-grid-tile v-for="post, index in list" :key="index">
                <img :src="post.image" @click="showPostDetail(index)" />
                <span slot="title">{{post.title}}</span>
                <span slot="subTitle">by
                    <b>{{post.author}}</b>
                </span>
                <mu-icon-button :icon="post.isStar | iconStateFilter" slot="action" :title="post.star | starsDeal" @click="toggleStar(post.id, index)" />
            </mu-grid-tile>
    
        </mu-grid-list>
    </div>
    <!--END Ground-->
</template>
<script>
import axios from 'axios'
export default {
    name: 'ground',
    data() {
        return {
            cellHeight: 300,
            page: 1,
            list: [/*{
                id: obj._id,
                image: obj.poster,
                title: obj.title,
                author: obj.author,
                star: obj.star,   // star数量
                createdAt: obj.createdAt,
                isStar: false         // 是否已star
            }*/],
            isBusy: false,
            isLoadAll: false
        }
    },
    computed: {
        username() {
            return this.$store.state.username;
        },
        scrT() {
            return document.body.scrollTop
        }
    },
    watch: {
        isBusy(val) {
            this.$store.commit('SPINER_CHANGE', {
               isSpiner: val
            })
        }
    },
    methods: {
        showPostDetail(index) {
            this.$router.push({ name: 'PostDetail', params: { id: this.list[index].id } })
        },
        getPosts(page) {
            var username = this.username;
            axios.get('api/posts', {
                params: {
                    page: page
                }
            }).then((res) => {
                if (!res.data.length) {
                    this.isLoadAll = true;
                    return;
                }
                res.data.forEach((obj) => {
                    var starBy = obj.starBy;
                    var isStar = starBy.indexOf(username) == -1 ? false : true;
                    var objTmp = {
                        id: obj._id,
                        image: obj.poster,
                        title: obj.title,
                        author: obj.author,
                        star: obj.star,
                        createdAt: obj.createdAt,
                        isStar: isStar
                    };
                    this.list.push(objTmp);
                })
                this.page++;
                this.isBusy = false;
            })
        },
        // star或取消star
        toggleStar(id, index) {
            console.log(this.scrT);
            axios.post('api/posts/star', {
                username: this.username,
                postId: id
            }).then(function (res) {
                console.log(res);
                if (res.code == 1) {
                    this.$store.commit('SNACK_BAR_CHANGE', {
                        snackbar: true,
                        snackMsg: 'Something goes wrong, try star again'
                    })
                    return;
                }
                //成功
                this.$store.commit('SNACK_BAR_CHANGE', {
                    snackbar: true,
                    snackMsg: 'Toggle star successfully'
                })
                this.list[index].isStar = !this.list[index].isStar

            }.bind(this))
        },
        // 判断是否滚动条到达底部
        isArriveBottom(scrT) {
            var winH = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            var endPointH = this.$refs.box.offsetHeight + 80;  // 80为 20 + 60 的box的padding
            return (endPointH - winH <= scrT) ? true : false
        },
        // 加载post
        loadPost() {
            if (this.isLoadAll) {
                this.$store.commit('SNACK_BAR_CHANGE', {
                    snackbar: true,
                    snackMsg: 'All posts is loaded.'
                })
                this.$store.commit('SPINER_CHANGE', {
                    isSpiner: false,
                })
                return;
            }
            if (this.isBusy) {
                return;
            }
            this.isBusy = true;
            this.getPosts(this.page)
        }
    },
    filters: {
        starsDeal(star) {
            return "Owns " + star + " stars"
        },
        iconStateFilter(isStar) {
            return isStar == true ? 'star' : 'star_border'
        }
    },
    mounted() {
        this.getPosts(this.page);
        window.addEventListener('scroll', function (e) {
            console.log(this.isArriveBottom(scrT))
            var scrT = document.body.scrollTop;
            if (this.isArriveBottom(scrT)) {
                this.loadPost();
            }
        }.bind(this))
    }
}
</script>
<style scoped lang="scss">
.ground-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 100%;
}

.ground {
    width: 80%;
    height: 90%;
}

.mu-grid-tile>img {
    cursor: pointer;
    width: 100%;
    height: auto;
}
</style>
